import { LinkedList } from "@/utils/struct/LinkedList"
import { onMounted } from "@vue/runtime-core";
import * as d3 from "d3";
import { Ref, ref } from "vue";
import useD3Draw from "./useD3Draw";

export interface IElement {
    v: number;
    id: number;
}

const containerHeight = 700;
const containerWidth = 1000;

const useD3LinkedList = (containerID: string, data: number[]) => {
    
    const linkedList = new LinkedList(data.map<IElement>((v, id) => { return {v, id} }));
    let d3Container, size = data.length;

    const { drawListMap } = useD3Draw(containerID, containerHeight, containerWidth);
    const removeLoading = ref<boolean>(false);
    const insertLoading = ref<boolean>(false);

    onMounted(() => {
        d3Container = d3.select('#'+containerID);
        d3Container.attr('height', containerHeight);
        d3Container.attr('width', containerWidth);
        drawListMap(linkedList.data());
    })


    return {
        LinkedListMethods: {

        },
        insertLoading,
        removeLoading,
    }
}

export default useD3LinkedList;